<template>
	<view class="container">
		<view class="tui-cells">
			<textarea class="tui-textarea" name="desc" v-model="cmtText" placeholder="发表你的评论..." maxlength="500" placeholder-class="tui-phcolor-color" auto-focus />
			<view class="tui-textarea-counter">0/500</view>
		</view>
		<view class="tui-cmt-btn">
			<tui-button shape="circle" @tap="submitCmt" type="darkgold" :disabled="disabled" :loading="loading">发表</tui-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cmtLevel: 0, // 0:评论 1：回复
				collectionUid: '',
				commentUid: '',
				cmtText: '',
				disabled: false,
				loading: false,
			};
		},
		onLoad(option) {
			if (option.collectionUid) {
				this.collectionUid = option.collectionUid
				this.cmtLevel = 0
			} else if (option.data) {
				let data = JSON.parse(option.data)
				this.collectionUid = data.collectionUid,
				this.commentUid = data.commentUid
				this.cmtLevel = 1
			}
		},
		methods: {
			submitCmt() {
				if (this.disabled || this.loading) {
					return
				}
				if (this.cmtText == '' || this.cmtText == null) {
					this.fetch.toast("评论内容不能为空")
					return
				}
				this.disabled = true
				this.loading = true
				this.fetch.request("/api/wxmini/addComment", "POST", {
					parentId: this.cmtLevel == 0 ? "0" : this.commentUid,
					collectionUid: this.collectionUid,
					cmtText: this.cmtText
				}, false, true, true, this)
				.then((res) => {
					this.disabled = false
					this.loading = false
					this.fetch.toast(res.msg, "", res.code == 0)
					if (res.code == 0) {
						this.cmtText = ""
					}
				}).catch(() => {
					this.disabled = false
					this.loading = false
				})
			}
		}
	};
</script>

<style>
page {
	background-color: #fafafa;
}

.container {
	padding: 30rpx;
	box-sizing: border-box;
}

.tui-cells {
	border-radius: 4rpx;
	height: 280rpx;
	box-sizing: border-box;
	padding: 20rpx 20rpx 0 20rpx;
	position: relative;
}

.tui-cells::after {
	content: '';
	position: absolute;
	height: 200%;
	width: 200%;
	border: 1px solid #e6e6e6;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	left: 0;
	top: 0;
	border-radius: 8rpx;
	pointer-events: none;
}

.tui-textarea {
	height: 210rpx;
	width: 100%;
	color: #666;
	font-size: 28rpx;
}

.tui-phcolor-color {
	color: #ccc !important;
}

.tui-textarea-counter {
	font-size: 24rpx;
	color: #999;
	text-align: right;
	height: 40rpx;
	line-height: 40rpx;
	padding-top: 4rpx;
}
.tui-enclosure {
	display: flex;
	align-items: center;
	padding: 26rpx 10rpx;
	box-sizing: border-box;
}

.tui-cmt-btn {
	margin-top: 60rpx;
}
</style>
